<template>
  <div class="content">
    <toolBtn
        :toolList="toolList.toolList"
        @toolChange="toolChange"
    >
    </toolBtn>
    <el-form
        ref="brandFormRef"
        label-width="100px"
        :model="form.formData"
        :rules="form.formFules"
    >
      <formLabel
          formType="1"
          :publicForm="form.basicForm"
          :formData="form.formData"
          @formSelectEmit="formSelectEmit"
      >
      </formLabel>
    </el-form>
  </div>
</template>

<script>
import {reactive, ref, toRaw, onBeforeMount, getCurrentInstance} from "vue"
import {useRouter} from "vue-router";
import {getCityList, getCountryList} from "@/utils/apiCommon";

export default {
  name: "supplierDetails",
  components: {},
  setup() {
    const {proxy} = getCurrentInstance()
    let formRef = ref();
    let router = useRouter()
    let toolList = reactive({
      toolList: [
        {id: "3", label: "保存", ismul: false},
      ]
    })
    let {type} = router.currentRoute.value.query;
    if (type == 'add') {

    } else {

    }
    const form = reactive({
      formData: {
        uuid: '',
        customerNum: '',
        customerName: '',
        simpleName: '',
        superiorName: '',
        archivesType: '',
        localCustomerName: '',
        companies: '',
        approveStatus: 1,
        url: '',
        developLevel: '',
        industry: '',
        countryCity: '',
        remark: '',
        dictValueNum: '',
        currencyNum: 'USD',
        initQuota: '0',
        approvedQuota: '',
        availableQuota: '',
        usedQuota: '',
        cityVal: '',
        countryVal: '',
        sysBankCardL: [
          {
            bankName: '',
            beneficiaryName: '',
            accountNumber: '',
            officeAddress: '',
            bankCode: '',
            branchCode: '',
            swiftCode: ''
          },
        ],
        salesmanList: [
          {
            isShow: true,
            delivery: true,
            accessory: false,
            invoice: true,
            addr: true,
            payment: true,
            linkmanOff: true,
            saleNickName: '',
            saleUserId: '',
            belongOrganization: '',
            belongOrganizationId: '',
            busOrganization: '',
            busOrganizationId: '',
            contSource: '',
            contTransactionWay: '',
            currency: '',
            creditAmt: '',
            availableQuota: '',
            linkmanOpt: [],
            termsOpt: [],
            addrOpt: [],
            invoiceOpt: [],
            fixedOpt: [],
            termsRadio: null,
            addrRadio: null,
            invoiceRadio: null,
            flowRadio: null,
            linkmanList: [
              {
                contName: '',
                contPhone: '',
                contEmail: '',
                contPositionState: 1,
                contPosition: '',
                contDutyProject: '',
                contRemark: ''
              },
              {
                contName: '',
                contPhone: '',
                contEmail: '',
                contPositionState: 1,
                contPosition: '',
                contDutyProject: '',
                contRemark: ''
              }
            ],
            termsNew: [
              {
                termsInfo: ''
              }
            ],
            shippingAddressNew: [
              {
                contCompany: '',
                contName: '',
                contPhone: '',
                contAddr: '',
                contRemark: ''
              }
            ],
            // 发票地址
            invoiceNew: [
              {
                contCompany: '',
                contName: '',
                contAddr: '',
                contRemark: '',
                contPhone: ''
              }
            ],
            // 物流要求
            fixedFlowRuleNew: [
              {
                contProject: '',
                contRequire: '',
                contItem: '',
                contRemark: ''
              }
            ],
            termsNewupload: []
          },
          {
            isShow: true,
            delivery: true,
            accessory: false,
            invoice: true,
            addr: true,
            payment: true,
            linkmanOff: true,
            saleNickName: '',
            saleUserId: '',
            belongOrganization: '',
            belongOrganizationId: '',
            busOrganization: '',
            busOrganizationId: '',
            contSource: '',
            contTransactionWay: '',
            currency: '',
            creditAmt: '',
            availableQuota: '',
            linkmanOpt: [],
            termsOpt: [],
            addrOpt: [],
            invoiceOpt: [],
            fixedOpt: [],
            termsRadio: null,
            addrRadio: null,
            invoiceRadio: null,
            flowRadio: null,
            linkmanList: [
              {
                contName: '',
                contPhone: '',
                contEmail: '',
                contPositionState: 1,
                contPosition: '',
                contDutyProject: '',
                contRemark: ''
              },
              {
                contName: '',
                contPhone: '',
                contEmail: '',
                contPositionState: 1,
                contPosition: '',
                contDutyProject: '',
                contRemark: ''
              }
            ],
            termsNew: [
              {
                termsInfo: ''
              }
            ],
            shippingAddressNew: [
              {
                contCompany: '',
                contName: '',
                contPhone: '',
                contAddr: '',
                contRemark: ''
              }
            ],
            // 发票地址
            invoiceNew: [
              {
                contCompany: '',
                contName: '',
                contAddr: '',
                contRemark: '',
                contPhone: ''
              }
            ],
            // 物流要求
            fixedFlowRuleNew: [
              {
                contProject: '',
                contRequire: '',
                contItem: '',
                contRemark: ''
              }
            ],
            termsNewupload: []
          }
        ]
      },
      basicForm: {
        title: '基本信息',
        isTitle: true,
        showSearch: true,
        data: [
          {
            label: '供应商编码',
            prop: 'customerNum',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: true, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 4
          },
          {
            label: '供应商',
            prop: 'customerName',
            type: 'text',
            disabled: false,
            placeholder: '请输入供应商',
            colSpan: 6,
            option: [],
            isFilterable: true, //是否搜索
            isMultiple: false,//是否多选
            clearable: false,
            addPath: '',//当前选项没有数据时，跳转到新增页面的地址,
            selectTableData: [],
            contacts: [
              {prop: 'companyNum', label: '供应商编码', width: '120', align: 'center'},
              {prop: 'customerName', label: '供应商名称', width: '120', align: 'center'},
              {prop: 'saleNickName', label: '销售人员', width: '120', align: 'center'},
              {prop: 'po', label: '是否po', align: 'center'}
            ],
            isHttpType: '9',
            otherData: {oldCustomerName: '', toCustomerName: ''}
          },
          {
            label: '当地名称',
            prop: 'localCustomerName',
            type: 'text',
            disabled: false,
            placeholder: '请输入当地供应商名',
            colSpan: 6
          },
          {
            label: '上级供应商',
            prop: 'superiorName',
            type: 'text',
            disabled: false,
            placeholder: '请输入上级供应商',
            colSpan: 6,
            option: [],
            isFilterable: true, //是否搜索
            isMultiple: false,//是否多选
            clearable: false,
            addPath: '',//当前选项没有数据时，跳转到新增页面的地址,
            selectTableData: [],
            contacts: [
              {prop: 'companyNum', label: '供应商编码', width: '120', align: 'center'},
              {prop: 'customerName', label: '供应商名称', width: '120', align: 'center'},
              {prop: 'saleNickName', label: '销售人员', width: '120', align: 'center'},
              {prop: 'po', label: '是否po', align: 'center'}
            ],
            isHttpType: '9',
            otherData: {oldCustomerName: '', toCustomerName: ''}
          },
          {
            label: '简称',
            prop: 'simpleName',
            type: 'text',
            disabled: false,
            placeholder: '请输入简称',
            colSpan: 4
          },
          {
            label: '审批状态',
            prop: 'approveStatus',
            type: 'select',
            disabled: true,
            placeholder: '请输入审批状态',
            option: [
              {label: '暂存', value: 1},
              {label: '待审批', value: 2},
              {label: '已审批', value: 3}
            ],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '网址',
            prop: 'url',
            type: 'text',
            disabled: false,
            placeholder: '请输入网址',
            colSpan: 4
          },
          {
            label: '供应商标签',
            prop: 'developLevel',
            type: 'select',
            disabled: false,
            placeholder: '请输入供应商标签',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '供应商类型',
            prop: 'customerType',
            type: 'select',
            disabled: false,
            placeholder: '请输入供应商类型',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '所属行业',
            prop: 'industry',
            type: 'select',
            disabled: false,
            placeholder: '请输入所属行业',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '国家',
            prop: 'countryVal',
            type: 'select',
            disabled: false,
            placeholder: '请输入国家',
            option: [],
            isFilterable: true, //是否搜索
            clearable: true,
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '城市',
            prop: 'cityVal',
            type: 'select',
            disabled: false,
            placeholder: '请输入城市',
            option: [],
            isFilterable: true, //是否搜索
            clearable: true,
            isMultiple: false,//是否多选
            isLoadMore: true,//是否下拉加载更多
            addPath: '',
            colSpan: 4
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'text',
            disabled: false,
            placeholder: '请输入备注',
            colSpan: 4
          },
          {
            label: '创建组织',
            prop: 'deptName',
            type: 'text',
            disabled: true,
            placeholder: '请输入创建组织',
            colSpan: 4
          },
          {
            label: '档案类型',
            prop: 'archivesType',
            type: 'select',
            disabled: false,
            placeholder: '请选择供应商档案类型',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          }
        ]
      },
      bankForm: {
        title: '银行信息',
        isTitle: true,
        showSearch: true,
        data: [
          {
            label: '收款银行',
            prop: 'bankName',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          },
          {
            label: '收款公司',
            prop: 'beneficiaryName',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          },
          {
            label: '收款账号',
            prop: 'accountNumber',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          },
          {
            label: 'OfficeAddress',
            prop: 'officeAddress',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          },
          {
            label: 'BankCode',
            prop: 'bankCode',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          },
          {
            label: 'BranchCode',
            prop: 'branchCode',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          },
          {
            label: 'SwiftCode',
            prop: 'swiftCode',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 6
          }
        ]
      },
      buttForm: {
        title: '对接信息',
        isTitle: true,
        showSearch: true,
        data: [
          {
            label: '销售人员',
            prop: 'saleNickName',
            type: 'select',
            disabled: false,
            placeholder: '请选择销售人员',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '供应商来源',
            prop: 'contSource',
            type: 'select',
            disabled: false,
            placeholder: '请选择供应商来源',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '交易方式',
            prop: 'contTransactionWay',
            type: 'select',
            disabled: false,
            placeholder: '请选择交易方式',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
          {
            label: '额度币种',
            prop: 'currency',
            type: 'select',
            disabled: false,
            placeholder: '请选择额度币种',
            option: [],
            isFilterable: false, //是否搜索
            isMultiple: false,//是否多选
            addPath: '',
            colSpan: 4
          },
        ]
      },
      linkmanList: {
        title: '联系人',
        isTitle: true,
        showSearch: true,
        data: [
          {
            label: '联系人',
            prop: 'contName',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入联系人',
            colSpan: 4
          },
          {
            label: '联系方式',
            prop: 'contPhone',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入联系方式',
            colSpan: 4
          },
          {
            label: '邮箱',
            prop: 'contEmail',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入邮箱',
            colSpan: 4
          },
          {
            label: '地址',
            prop: 'contPosition',
            type: 'text', //text 文本  select 下拉  data 日期选择
            disabled: false, //是否禁用
            placeholder: '请输入供应商编码',
            colSpan: 4
          },
        ]
      },
      formFules: {
        customerNum: [{required: true, message: '供应商编码不能为空', trigger: 'blur'}],
        customerName: [{required: true, message: '供应商不能为空', trigger: 'blur'}],
        localCustomerName: [{required: true, message: '当地供应商名不能为空', trigger: 'blur'}],
        simpleName: [{required: true, message: '简称不能为空', trigger: 'blur'}],
        developLevel: [{required: true, message: '供应商标签不能为空', trigger: 'change'}],
        industry: [{required: true, message: '所属行业不能为空', trigger: 'change'}],
        tradeRemark: [{required: true, message: '行业备注不能为空', trigger: 'blur'}],
        productSequence: [{required: true, message: '产品系列不能为空', trigger: 'change'}]
      }
    })

    let countryIndex = "";
    let cityIndex = "";

    form.basicForm.data.forEach((item, index) => {
      if (item.prop == "countryVal") {
        countryIndex = index
      }
      if (item.prop == "cityVal") {
        cityIndex = index
      }
    })
    /*
    * 国家城市
    * */
    getCountryList(form.basicForm.data[countryIndex])
    getCityList("", form.basicForm.data[cityIndex])


    /*
     * 组件下拉选择回调方法
     */
    const formSelectEmit = (val, currentItem, $index, obj) => {
      console.log("val", val)
      console.log("currentItem", currentItem)
      console.log("$index", $index)
      console.log("obj", obj)
      if (currentItem.prop == "countryVal") {
        form.formData.cityVal = ""
        getCityList(val, form.basicForm.data[cityIndex])
      }
    }
    const toolChange = (e) => {
      if (e == '3') {
        toolList.toolList.push({id: "4", label: "提交", ismul: false})
      } else if (e == '4') {
        toolList.toolList.push(
            {id: "5", label: "审批", ismul: false},
        )
      }
    };

    const studyApplyFun = (x, y) => {
      console.log("x === ", x);
      console.log("y === ", y);
      return x + y
    }
    const getApplyFun = (n1, n2) => {
      // return studyApplyFun.apply(this,[n1,n2])
      return studyApplyFun.call(this, n1, n2)
    }
    console.log("getApplyFun === ", getApplyFun(5, 6))
    return {
      formRef,
      form,
      toolList,
      formSelectEmit,
      toolChange
    }
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>